﻿@{
    ViewBag.Title = "网站后台登录";
}
<div class="header">网站后台登录</div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal" id="form">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <span><input id="userName" name="userName" type="text" placeholder="用户名" value="yokin" class="input-text size-L"></span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <span><input id="password" name="password" type="password" placeholder="密码" value="123456" class="input-text size-L"></span>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <span>
                        <input class="input-text size-L" id="validateCode" name="validateCode" type="text" placeholder="验证码" value="" style="width:150px;">
                    </span>
                    <img id="imgValidateCode" src="/WebAdmin/Home/GetValidateCode"> <a id="kanbuq" href="javascript:;">看不清，换一张</a>
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input id="btnLogin" type="submit" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer">Copyright © linyongqin.com All rights reserved.</div>
@section HeaderStyle
{
    <link href="~/Areas/WebAdmin/FrontLib/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
}
@section FooterScript
{
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="~/Areas/WebAdmin/FrontLib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="~/Areas/WebAdmin/FrontLib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="~/Areas/WebAdmin/FrontLib/jquery.validation/1.14.0/messages_zh.js"></script>

    <script type="text/javascript">
        $(function () {
            if (window != window.top) {
                window.top.location.href = window.location.href;
            }

            $("#kanbuq,#imgValidateCode").click(function () {
                $("#imgValidateCode").attr("src", "/WebAdmin/Home/GetValidateCode?" + Math.random());
            });
            $("#imgValidateCode").click();//为了避免页面刚打开的时候加载缓存中"/WebAdmin/Home/GetValidateCode"

            //因此要主动点击一下，刷新验证码

            $("#form").validate({
                rules: {
                    userName: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    validateCode: {
                        required: true,
                        minlength: 4
                    }
                },
                messages: {
                    userName: {
                        required: '必填'
                    },
                    password: {
                        required: '必填'
                    },
                    validateCode: {
                        required: '必填',
                        minlength: '输入长度有误'
                    }
                },
                onkeyup: false,
                focusCleanup: true,
                success: "valid",
                submitHandler: function (form) {
                    //禁用登录按钮，防止重复提交
                    $("#btnLogin").prop("disabled",true);

                    $(form).ajaxSubmit({
                        type: 'POST',
                        url: "/WebAdmin/Home/Login",
                        data: $("#loginform form").serializeArray(),
                        success: function (res) {
                            if (res.status == "ok") {
                                //登录成功
                                location.href = "/WebAdmin/Home/Index";
                            } else {
                                layer.msg(res.errorMsg, { icon: 2, time: 2000 });
                                //刷新验证码
                                $("#imgValidateCode").click();
                                $("#ValidateCode").val("");
                                //解除禁用
                                $("#btnLogin").prop("disabled", false);
                            }
                        },
                        error: function (XmlHttpRequest, textStatus, errorThrown) {
                            layer.msg('网络出错!', { icon: 2, time: 1000 });
                            //解除禁用
                            $("#btnLogin").prop("disabled", false);
                        }
                    });
                }
            });
        });
    </script>
}

